<template>
  <div>
    <h1>提交记录</h1>
  </div>
  <el-table :data="data" stripe border style="width: 100%">
    <el-table-column prop="id" label="Id" width="50" />
    <el-table-column prop="title" label="Title">
      <template #default="scope">
        <router-link :to="'/result/' + scope.row.id">{{
          scope.row.title
        }}</router-link>
      </template>
    </el-table-column>
    <el-table-column prop="user" label="User" width="150" />
    <el-table-column prop="time" label="Time" width="200" />
    <!--新增自定义列-->
    <el-table-column prop="" label="Operation" width="100">
      <template #default="scope">
        <el-popconfirm
          title="确定删除吗？"
          @confirm="deleteHistory(scope.row.id)"
        >
          <template #reference>
            <el-button type="danger" circle :icon="DeleteFilled"></el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
import {
  ElTable,
  ElTableColumn,
  ElButton,
  ElPopconfirm,
  ElMessage,
} from "element-plus";
import { ref } from "vue";
import { DeleteFilled } from "@element-plus/icons";
import api from "./api";
export default {
  components: { ElTable, ElTableColumn, ElButton, ElPopconfirm },
  setup() {
    const data = ref([]);
    data.value = api.getList();
    const deleteHistory = (id) => {
      //删除后重新加载数据
      data.value = api.deleteHistory(id);
      ElMessage({
        type: "sueccess",
        message: "删除成功",
      });
    };
    return {
      data,
      DeleteFilled,
      deleteHistory,
    };
  },
};
</script>